---
title: Screens - Material Tailwind
description: Learn how to customize the breakpoints for Material Tailwind.
navigation:
  ["default-screens", "customizing-the-default", "adding-new-breakpoint"]
github: screens
prev: shadows
next: accordion
---

# Customizing Screens - Material Tailwind

Customize the default breakpoints for @material-tailwind/react and add your own custom breakpoints that you like to have for your project.

<br />
<br />

<DocsTitle href="default-screens">
## Default Screens
</DocsTitle>

<span id="default-screens" className="scroll-mt-48" />

@material-tailwind/react provides a set of default breakpoints for different screen sizes that you can use.

```js
const boxShadow = {
  sm: "540px",
  md: "720px",
  lg: "960px",
  "lg-max": { max: "960px" },
  xl: "1140px",
  "2xl": "1320px",
};
```

---

<DocsTitle href="customize-the-default">
## Customize the Default Breakpoints
</DocsTitle>

<span id="customize-the-default" className="scroll-mt-48" />

You can customize the default breakpoints for @material-tailwind/react very easy and straightforward, it's the same as customizing breakpoints for tailwindcss.

You just need to customize the breakpoint that you like through the <Code>screens</Code> object for <Code>tailwind.config.js</Code> file.

```js {4}
module.exports = withMT({
  theme: {
    screens: {
      sm: "640px",
      // rest of the breakpoints
    },
  },
});
```

---

<DocsTitle href="adding-new-breakpoint">
## Adding New Breakpoint
</DocsTitle>

<span id="adding-new-breakpoint" className="scroll-mt-48" />

You can add new breakpoint for @material-tailwind/react very easy and straightforward, it's the same as adding new breakpoint for tailwindcss.

You just need to add your own breakpoint to the <Code>extend</Code> and <Code>screens</Code> object for <Code>tailwind.config.js</Code> file.

```js {5}
module.exports = withMT({
  theme: {
    extend: {
      screens: {
        "3xl": "1600px",
      },
    },
  },
});
```

<br />
<br />
<br />

For more information about tailwindcss breakpoints customization, please check the <a href="https://tailwindcss.com/docs/screens?ref=material-tailwind" target="_blank" className="font-medium hover:text-blue-500 transition-colors">TailwindCSS Documentation</a>
